/**
 * 系统管理  公司管理
 */
<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>资源申请模板</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="搜索：">
                <el-input size="small" v-model="formInline.deptName" placeholder="模板名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
            </el-form-item>
        </el-form>
        <!--列表-->
        <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
            element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column align="center" type="selection" width="60">
            </el-table-column>
            <el-table-column sortable prop="deptName" label="模板名称" width="300">
            </el-table-column>
            <el-table-column sortable prop="deptNo" label="上传人" width="300">
            </el-table-column>
            <el-table-column sortable prop="editTime" label="附件" width="300">
                <template slot-scope="scope">
                    <div>{{ scope.row.editTime | timestampToTime }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="isLock" label="是否启用" min-width="150">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.deptNo == 'N' ? nshow : fshow" active-color="#13ce66"
                        inactive-color="#ff4949" @change="editType(scope.$index, scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="300">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
        <!-- 编辑界面 -->
        <el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @click="closeDialog">
            <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
                <el-form-item label="模板名称" prop="deptName">
                    <el-input size="small" v-model="editForm.deptName" auto-complete="off" placeholder="请输入部门名称"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="deptNo">
                    <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </el-form-item>
                <el-form-item label="附件" prop="deptNo">
                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload> </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog">取消</el-button>
                <el-button size="small" type="primary" :loading="loading" class="title"
                    @click="submitForm('editForm')">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { deptList, deptSave, deptDelete } from '../../../api/userMG'
import Pagination from '../../../components/Pagination'
export default {
    data() {
        return {
            nshow: true, //switch开启
            fshow: false, //switch关闭
            loading: false, //是显示加载
            editFormVisible: false, //控制编辑页面显示与隐藏
            title: '添加',
            value: false,
            editForm: {
                deptId: '',
                deptName: '',
                deptNo: '',
                token: localStorage.getItem('logintoken')
            },
            // rules表单验证
            rules: {
                deptName: [
                    { required: true, message: '请输入部门名称', trigger: 'blur' }
                ],
                deptNo: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
            },
            formInline: {
                page: 1,
                limit: 10,
                varLable: '',
                varName: '',
                token: localStorage.getItem('logintoken')
            },
            // 修改type
            editType: function (index, row) {
                this.loading = true
                let parm = {
                    lock: '',
                    userId: '',
                    token: localStorage.getItem('logintoken')
                }
                parm.userId = row.userId
                let lock = row.isLock
                if (lock == 'N') {
                    parm.lock = 'Y'
                } else {
                    parm.lock = 'N'
                }
            },
            // 删除部门
            seletedata: {
                ids: '',
                token: localStorage.getItem('logintoken')
            },
            userparm: [], //搜索权限
            listData: [], //用户数据
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            }
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    /**
     * 数据发生改变
     */

    /**
     * 创建完毕
     */
    created() {
        this.getdata(this.formInline)
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
        // 获取公司列表
        getdata(parameter) {
            this.loading = true
            // 模拟数据
            let res = {
                code: 0,
                msg: null,
                count: 5,
                data: [
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1521062371000,
                        editTime: 1526700200000,
                        deptId: 2,
                        deptName: '上海分公司',
                        deptNo: '1',
                        parentId: 1
                    },
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1521063247000,
                        editTime: 1526652291000,
                        deptId: 3,
                        deptName: '上海测试',
                        deptNo: '02',
                        parentId: 1
                    },
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1526349555000,
                        editTime: 1526349565000,
                        deptId: 12,
                        deptName: '1',
                        deptNo: '11',
                        parentId: 1
                    },
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1526373178000,
                        editTime: 1526373178000,
                        deptId: 13,
                        deptName: '5',
                        deptNo: '5',
                        parentId: 1
                    },
                    {
                        addUser: null,
                        editUser: null,
                        addTime: 1526453107000,
                        editTime: 1526453107000,
                        deptId: 17,
                        deptName: 'v',
                        deptNo: 'v',
                        parentId: 1
                    }
                ]
            }
            this.loading = false
            this.listData = res.data
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
            // 模拟数据结束

            /***
             * 调用接口，注释上面模拟数据 取消下面注释
             */
            // deptList(parameter)
            //   .then(res => {
            //     this.loading = false
            //     if (res.success == false) {
            //       this.$message({
            //         type: 'info',
            //         message: res.msg
            //       })
            //     } else {
            //       this.listData = res.data
            //       // 分页赋值
            //       this.pageparm.currentPage = this.formInline.page
            //       this.pageparm.pageSize = this.formInline.limit
            //       this.pageparm.total = res.count
            //     }
            //   })
            //   .catch(err => {
            //     this.loading = false
            //     this.$message.error('菜单加载失败，请稍后再试！')
            //   })
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
        },
        // 搜索事件
        search() {
            this.getdata(this.formInline)
        },
        //显示编辑界面
        handleEdit: function (index, row) {
            this.editFormVisible = true
            if (row != undefined && row != 'undefined') {
                this.title = '修改'
                this.editForm.deptId = row.deptId
                this.editForm.deptName = row.deptName
                this.editForm.deptNo = row.deptNo
            } else {
                this.title = '添加'
                this.editForm.deptId = ''
                this.editForm.deptName = ''
                this.editForm.deptNo = ''
            }
        },
        // 编辑、增加页面保存方法
        submitForm(editData) {
            this.$refs[editData].validate(valid => {
                if (valid) {
                    deptSave(this.editForm)
                        .then(res => {
                            this.editFormVisible = false
                            this.loading = false
                            if (res.success) {
                                this.getdata(this.formInline)
                                this.$message({
                                    type: 'success',
                                    message: '公司保存成功！'
                                })
                            } else {
                                this.$message({
                                    type: 'info',
                                    message: res.msg
                                })
                            }
                        })
                        .catch(err => {
                            this.editFormVisible = false
                            this.loading = false
                            this.$message.error('公司保存失败，请稍后再试！')
                        })
                } else {
                    return false
                }
            })
        },
        // 删除公司
        deleteUser(index, row) {
            this.$confirm('确定要删除吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deptDelete(row.deptId)
                        .then(res => {
                            if (res.success) {
                                this.$message({
                                    type: 'success',
                                    message: '公司已删除!'
                                })
                                this.getdata(this.formInline)
                            } else {
                                this.$message({
                                    type: 'info',
                                    message: res.msg
                                })
                            }
                        })
                        .catch(err => {
                            this.loading = false
                            this.$message.error('公司删除失败，请稍后再试！')
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // 关闭编辑、增加弹出框
        closeDialog() {
            this.editFormVisible = false
        }
    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}
</style>

 